<template>
  <view style="padding-bottom:60px">
    <uni-swipe-action class="cart-list">
      <block v-for="(item,index) in  cartList" :key="index">
        <uni-swipe-action-item :right-options="options">
          <view class="box">
            
            <view class="radio">
              <radio @click="radioChange(item)" value="r1" color='#C00000' :checked="item.goods_state" />
            </view>
            <image class="center" :src='item.goods_small_logo' mode=""></image>
            <view class="right">
              <view class="top">
                {{item.goods_name}}
              </view>
              <view class="bottom">
                <text>{{item.goods_price}}</text>
                <view class="">
                  <uni-number-box @change='numchange(item,$event)' :min="1" :value='item.goods_number'></uni-number-box>
                </view>
              </view>
            </view>

          </view>
          <view slot="right" style="display: flex;align-items: center;background:#dd524d;" @click="del(item.goods_id)"><text>删除</text></view>
        </uni-swipe-action-item>
      </block>

    </uni-swipe-action>

    <my-setle></my-setle>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {

    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }]
      };
    },
    computed: {
      ...mapGetters("cart", ['total']),
      ...mapState("cart", ['cartList'])
    },
    onLoad() {

    },
    methods: {
      ...mapMutations('cart', ['updateState', 'updateNumber', "delItem"]),
      numchange(goods, e) {
        //  改变数量

        //console.log(goods,e,5555)
        this.updateNumber({
          goods_number: Number(e),
          goods_id: goods.goods_id
        })

      },
      radioChange(goods) {

        this.updateState(goods)
      },
      //  滑动组件事件
      del(goods_id) {
        console.log(1111222)
        this.delItem(goods_id)
      }
    }
  }
</script>

<style lang="scss">
  .box {
    display: flex;
    align-items: center;
    border-bottom: 1px solid red;
    padding: 10px;

    .left {
      flex: 1;
    }

    image {
      flex: 3;
      width: 100px;
      height: 60px;
    }

    .right {
      padding-left: 10px;
      flex: 7;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;

      .top {}

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
    }
  }
</style>
